<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色授权-修改授权</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <input name="roleId" type="hidden" th:value="${sysRole?.roleId}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">角色名</label>
                <div class="layui-input-block">
                    <input type="text" name="roleDesc" lay-verify="required" lay-reqtext="角色名不能为空" placeholder="请输入角色名" th:value="${sysRole?.roleDesc}" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">角色权限</label>
                <div class="layui-input-block">
                    <div id="menuIds" style="max-height: 640px;overflow: auto"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form','tree','notice'], function () {
        let form = layui.form,
            layer = layui.layer,
            tree = layui.tree,
            notice = layui.notice,
            $ = layui.$;

        let ctxPath = /*[[@{/}]]*/'';

        renderRoleMenu();
        function renderRoleMenu() {
            $.ajax({
                type:'GET',
                url:ctxPath+'system/sysMenuRole/getSysMenuIdsByRoleId/'+[[${sysRole?.roleId}]],
                dataType:"json",
                success:function (res){
                    if(res.code === 200){
                        tree.render({
                            elem: '#menuIds',
                            id:'menuIds',
                            showCheckbox: true,
                            data: res.data
                        })
                    }
                }
            });
        }

        //监听表单提交按钮
        form.on('submit(saveBtn)', function (data) {
            let checkData = tree.getChecked('menuIds');
            if(null == checkData || 0 == checkData.length){
                notice.warning('请至少勾选1个角色权限信息');
                return false;
            }
            let menuIds = getCheckedId(checkData);
            $.ajax({
                type: 'PUT',
                url: ctxPath+'system/sysMenuRole/updateMenuRole',
                data:JSON.stringify({
                    'roleId': data.field.roleId,
                    'menuId': menuIds
                }),
                contentType: 'application/json;charset=utf-8;',
                dataType:'json',
                success:function (res){
                    if(res.code === 200){
                        notice.success('操作成功');
                        setTimeout(function() {
                            layer.closeAll("iframe");
                            parent.location.reload();
                        },1000);
                    }else{
                        notice.error(res.msg);
                    }
                }
            });
            return false;
        });

        //递归获取所有选中的节点id
        function getCheckedId(data) {
            let id = "";
            $.each(data, function (index, item) {
                if (id != "") {
                    id = id + "," + item.id;
                }else {
                    id = item.id;
                }
                //item没有children属性
                if (item.children != null) {
                    let i = getCheckedId(item.children);
                    if (i != "") {
                        id = id + "," + i;
                    }
                }
            });
            return id;
        }
    });
</script>
</body>
</html>